<template>
    <div class="post">
        <div class="top">
            <!-- <router-link :to="`/themself/${post.userId}`">  -->
            <router-link :to="`${decode && post.userId == decode.userId ? '/myself' : `/themself/${post.userId}`}`"> 
                <van-image 
                    width="1rem" 
                    height="1rem" 
                    radius="100%" 
                    fit="cover" 
                    :src="post.img" 

                /> 
                <p>{{post.nickname}}</p>
            </router-link>
            <Report :bodyId="post.bodyId" :reportedId="post.userId"/>
        </div>
        <router-link 
            :to="`/postDetail/${post.bodyId}`"
            class="pic"
        >
            <div class="font">
                <p >
                    {{post.content}}
                </p>
            </div>
            <van-image 
                v-for="(img,index) in imgs"
                :key="index"
                width="3rem"
                height="3rem" 
                fit="cover" 
                :src="img" 
            />
        </router-link>
        <div class="tag" v-if="isGroup === false">
            <!-- <a ># {{post.classname}}</a> -->
            <router-link :to="`/square/${to}`"># {{post.classname}}</router-link>

        </div>
        <div class="bottom">
            <Like :like="like" :postId="post.bodyId" :className="className" :postContent="post.content" :userId='userId' ></Like>
            <Talk :postId="postId"></Talk>
            <Love :love="love" :postId="post.bodyId" :className="className" :postContent="post.content" :userId='userId'></Love>
        </div>
    </div>
</template>

<script>
import Talk from './Talk.vue'
import Like from './Like.vue'
import Love from './Love.vue'
import Report from './Report.vue'
import jwtDecode from 'jwt-decode'
export default {
    name:'Post',
    components:{
        Report,Talk,Like,Love
    },
    props:['post','isGroup'],
    data() {
        return {
            decode:null,
            to:null,
            like:null,
            postId:null,
            love:null,
            className:null,
            imgs:[],
            userId:null
        }
    },
    mounted() {
        //判断有没有登录
        if(sessionStorage.getItem('token')){
            let token=sessionStorage.getItem("token")
            this.decode = jwtDecode(token);
        }
        // console.log(this.post)
        this.userId = this.post.userId
        this.like = this.post.praise
        this.love = this.post.collection,
        this.className = this.post.classname
        this.postId = this.post.bodyId
        if(this.post.imgs){ 
            this.imgs = this.post.imgs.split(';')
        }else{
            this.imgs = this.post.imgs
        }
        switch (this.className){
            case '美食':
                this.to = 'food'
                break;
            case '娱乐':
                this.to = 'entertainment'
                break;
            case '兼职':
                this.to = 'job'
                break;
            case '交流圈子':
                this.to = 'chat'
                break;
            case '活动专区':
                this.to = 'activity'
                break;
            case '校园生活':
                this.to = 'friend'
                break;
            case '跳蚤市场':
                this.to = 'market'
                break;
        }
    },
}
</script>

<style lang="less" scoped>
    .post{
        background-color: white;
        padding: 0.25rem;
        margin-bottom: 0.3rem;
        overflow: auto;
        .top{
            display: inline-flex;
            justify-content: space-between;
            flex-direction: row;
            padding-bottom: 0.2rem;
            width: 100%;
            a{
                display: inline-flex;
                align-items: center;
                color: #4b4b4b;
                font-size: 0.4rem;
                p{
                    margin-left: 0.1rem;
                }
            }
            
        }
        .font{
            text-align: left !important;
            width: 100%;
            margin-bottom: 0.2rem;
            font-size: @fontSmall;
            p{
                white-space: pre-wrap;
            }
        }
        .pic{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            
            .van-image{
                margin-right: 0.15rem;
                margin-bottom: 0.2rem;
            }
            
        }
        .tag{
            a{
                padding: 0.05rem 0.15rem;
                display: inline-block;
                border-radius: 10px;
                border: solid 1px var(--themeColor);
                color: var(--themeColor);
            }
        }
        .bottom{
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-evenly;
        }
    }
</style>